<template>
  <div id="login">
    <div class="logo">
      <p>PI</p>
      <p>Music</p>
    </div>
    <div class="button">
      <van-button type="default" block round @click="showLoginPopup">
        手 机 号 码 登 录
      </van-button>
      <van-button type="danger" block round to="/index">
        免 登 录 立 即 体 验
      </van-button>
    </div>

    <!-- 弹出层 -->
    <van-popup v-model="showPopup" position="top" class="popup_login" closeable>
      <div class="form">
        <!-- 文字描述 -->
        <div class="slogen">
          <p class="slg_title">
            请使用网易云帐号登录<br /><span>体验更多精彩！</span>
          </p>
          <p class="slg_txt">
            <span class="slg_txt_tips">
              <b style="line-height: 20px"
                >注意: 手机号和密码为注册网易云音乐平台时候的手机和密码。<br />
                由于接口为网络资源，且在本项目并没有进行加<br />
                请注意帐号安全！</b
              >
            </span>
          </p>
        </div>
        <!-- 表单 -->
        <div class="text_input">
          <van-form @submit="login">
            <van-field
              class="input"
              v-model="phone"
              name="phone"
              label="手机号"
              placeholder="请输入手机号"
              style="color: red"
              :rules="[
                { required: true, pattern, message: '请填写正确的手机号' },
              ]"
            />
            <van-field
              class="input"
              v-model="password"
              type="password"
              name="password"
              label="密码"
              placeholder="请输入密码"
              :rules="[{ required: true, message: '请填写密码' }]"
            />
            <div class="loginbtn">
              <van-button round block type="danger" native-type="submit">
                登 录
              </van-button>
            </div>
          </van-form>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import { _login } from "../network/user.js";
export default {
  data() {
    return {
      showPopup: false,
      phone: "",
      password: "",
      pattern:
        /^(13[0-9]|14[5|7]|15[0|1|2|3|4|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/,
    };
  },
  methods: {
    showLoginPopup() {
      this.showPopup = true;
    },
    // 登录
    async login() {
      let { data: res } = await _login(this.phone, this.password);
      if (res.code == 200) {
        window.localStorage.setItem("token", res.token);
        window.localStorage.setItem("userinfo", JSON.stringify(res.profile));
        this.$msg.success("登录成功");
        this.$router.push("/index");
      } else {
        this.$msg.fail(res.msg);
      }
    },
  },
};
</script>

<style lang="less" scoped>
#login {
  width: 100%;
  height: 750px;
  background-image: url(../assets/images/bgcimage.jpg);
  background-size: cover;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  .logo {
    width: 100%;
    height: 50%;
    text-align: center;
    font-size: 56px;
    color: #fff;
  }
  .button {
    width: 80%;
    > button {
      margin: 20px 0;
    }
  }
  .popup_login {
    height: 100%;
    width: 100%;
    background-image: url(../assets/images/bgcimage.jpg);
    background-size: cover;
  }
  div.form {
    text-align: center;
    margin-top: 60px;
    .slogen {
      margin: 30px 0 0 16px;
      color: #555f70;
      .slg_title {
        font-size: 24px;
        line-height: 60px;
        > span {
          font-size: 18px;
          line-height: 60px;
        }
      }
      .slg_txt {
        margin: 30px 0 100px;
        font-size: 14px;
        line-height: 30px;
      }
      .slg_txt_tips {
        color: red;
        font-size: 12px;
      }
    }
    .van-cell {
      background-color: rgba(255, 255, 255, 0);
    }
    .text_input {
      margin-top: 40px;
      .input {
        margin: auto;
        width: 90%;
        background-color: rgba(255, 255, 255, 0);
        ::-webkit-input-placeholder {
          color: #697486;
        }
      }
    }
    .loginbtn {
      margin: 50px;
    }
    textarea:-moz-placeholder {
      color: #999999;
    }
  }

  .main ::v-deep .branch {
    color: #fff;
  }
}
</style>